.box {
  display: flex;
  width: 800px;
  height: 450px;
  margin: 100px auto 0 auto;
  perspective: 3200px;
  transform-style: preserve-3d;
}
.carousel {
  position: relative;
  width: 200px;
  height: 100%;
  transform-style: preserve-3d;
}
.carousel:nth-of-type(1) {
  transition: all 0.8s ease-in-out 0s;
}
.carousel:nth-of-type(1) div.carousel-item {
  background-position: 0px 0;
}
.carousel:nth-of-type(2) {
  transition: all 0.8s ease-in-out 0.15s;
}
.carousel:nth-of-type(2) div.carousel-item {
  background-position: -200px 0;
}
.carousel:nth-of-type(3) {
  transition: all 0.8s ease-in-out 0.3s;
}
.carousel:nth-of-type(3) div.carousel-item {
  background-position: -400px 0;
}
.carousel:nth-of-type(4) {
  transition: all 0.8s ease-in-out 0.45s;
}
.carousel:nth-of-type(4) div.carousel-item {
  background-position: -600px 0;
}
.carousel .carousel-item {
  position: absolute;
  width: 100%;
  height: 100%;
}
.carousel .carousel-item:nth-of-type(1) {
  transform: translateZ(225px);
  background: url(../image/1.jfif) no-repeat;
  background-size: cover;
}
.carousel .carousel-item:nth-of-type(2) {
  transform: translateY(-225px) rotateX(90deg);
  background: url(../image/2.jfif) no-repeat;
  background-size: cover;
}
.carousel .carousel-item:nth-of-type(3) {
  transform: translateZ(-225px) rotateX(180deg);
  background: url(../image/3.jfif) no-repeat;
  background-size: cover;
}
.carousel .carousel-item:nth-of-type(4) {
  transform: translateY(225px) rotateX(-90deg);
  background: url(../image/4.jfif) no-repeat;
  background-size: cover;
}
.next {
  width: 80px;
  font-size: 16px;
  margin-top: 20px;
  margin-left: 50%;
  transform: translateX(-50%);
}
